Skip to content


ai  101  pytorch  classification  nvidia  cuda  install  tensorrt  yolo  ardupilot  None  ros2  dds  micro ros  xrce  sitl  plugin  SITL  debug  rangefinder  pymavlink  mavros  gazebo  distance sensor  system_time  timesync  cmake  gtest  ctest  cpp  c++  format  fmt  multithreading  spdlog  camera  coordinate system  orb  matching  opencv  build  transformation  computer vision  homography  optical flow  of  trackers  cv  cyclonedds  eprosima  fastdds  simulation  config  ignition  bridge  sdf  tips  ign-transport  sensors  lidar  aptly  apt  encryption  pgp  docker  git  bundle  github  hooks  pre-commit  lxd  container  lxc  x11  profile  vscode  marpit  presentation  marp  markdown  mermaid  video  ffmpeg  gstreamer  cheat-sheet  sdp  v4l2loopback  gi  snippets  cheat Sheet  python  asyncio  future  click  cli  numpy  project  template  black  isort  docs  project document  docstrings  flake8  linter  git-hook  mypy  unittest  pytest  pylint  mock  iterator  generator  logging  tuple  namedtuple  typing  annotation  pyzmq  zmq  msgpack  action  namespace  remap  control2  ros2_control  gdb  qos  tag  plugins  msg  node  zero-copy  shm  tutorial  algorithm  calibration  diff  pid  dev  colcon  colcon_cd  rpi  arm  qemu  settings  behavior  plot  visualization  debugging  diagnostic  diagnostics  tutorials  gst  math  apm  rat_runtime_monitor  web  rosbridge  vue  binding  discovery  gazebo-classic  launch  spawn  cook  gps  imu  ray  gazebo_ros_ray_sensor  ultrsonic  range  ultrasonic  gazebo classic  wrench  effort  odom  ign  gz  xacro  ros_ign  diff_drive  odometry  joint_state  argument  OpaqueFunction  DeclareLaunchArgument  LaunchConfiguration  tmux  nav  slam  test  rclpy  executor  MultiThreadedExecutor  SingleThreadedExecutor  param  dynamic-reconfigure  service  client  setup.py  package.xml  parameter  parameters  custom  msgs  executers  pub  sub  rqt  rviz  rviz2  pose  marker  tf2  deb  package  setup  local_setup  rosdep  package manager  project settings  vcstool  cross-compiler  nano  texture  tmuxp  rootfs  embedded  zah  linux  rm  ubuntu  ip  ss  network  netstat  snap  deploy  ssh  systemd  mkdocs  extensions  socat  networking  serial  udp  tc  mtu  select  px4  robotics  kalman_filter  kalman  filter  control  todo  vscode-ext  json  yaml  schema  yocto  poky  world  gazebo_ros2_control  position_controller  effort_controller  velocity_controller  urdf  gazebo_ros_force  gazebo_ros_joint_state_publisher  robot_state_publisher  joint_state_publisher  projects  vrx  buoyancy 

Part5 - ROS Web interface with vue

ROS2 Web interface using roslibjs and vue3


Table of Content

Bridge#

run node
ros2 launch rosbridge_server rosbridge_websocket_launch.xml

Web#

  • index.html: load libraries and HTML template
  • app.js: Create vue app and init roslib connection
index.html
<html>

<head>
  <meta charset="utf-8" />
  <script src="http://static.robotwebtools.org/roslibjs/current/roslib.min.js"></script>
  <script src="https://unpkg.com/vue@3.0.2"></script>
</head>

<body>
  <h1>Simple ROS User Interface</h1>
  <div id="app">
    <p>ros status: {{status}}</p>

  </div>

  <script src="app.js"></script>

</body>

</html>
app.js
const app = Vue.createApp({
  data() {
    return {
      status: "---",
      param: 0
    }
  },
  mounted() {
    this.ros = new ROSLIB.Ros({
      url: 'ws://localhost:9090'
    });
  },
})
vm = app.mount('#app')

vm.ros.on('connection', () => {
    vm.status = "--connected--";
});

Parameter#

declared
var my_param = new ROSLIB.Param({
  ros: vm.ros,
  name: '/node:param_name'
});
get / set
//Get
my_param.get(function (value) {
  if (value != null) {
    console.log(value);
  }
});

//Set
my_param.set(5)